<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门管理</title>
    <title>vue-demo1</title>
    <script src="/js/vue.js"></script>
    <link rel="stylesheet" href="/css/index.css">
    <script src="/js/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <!--vue提供的生成二维码的组件-->
    <script src="/js/vue-qriously.js"></script>
</head>
<body>
<div id="app">
    <!--查询-->
    <el-row>
        <el-col :span="4"><el-input  v-model="searchForm.sname"  size="small" placeholder="请输入名字"></el-input></el-col>
        <el-col :span="4"><el-input  v-model="searchForm.card"  size="small" placeholder="请输入身份证号码"></el-input></el-col>
        <el-col :span="4"><el-button type="primary" @click="search" size="small" icon="el-icon-search">搜索</el-button></el-col>
        <!--        <el-col :span="4"><el-button type="primary" @click="handlerAdd"  size="small" icon="el-icon-circle-plus">添加</el-button></el-col>-->
        <el-col :span="4"></el-col>
        <el-col :span="4"></el-col>
    </el-row>
    <!--表格显示-->
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="id">
        </el-table-column>
        <el-table-column
                prop="name"
                label="医生名字">
        </el-table-column>
        <el-table-column
                prop="money"
                label="花费">
        </el-table-column>
        <el-table-column
                prop="sname"
                label="患者名字">
        </el-table-column>
        <el-table-column
                prop="card"
                label="身份证号码">
        </el-table-column>
        <el-table-column
                prop="time"
                label="时间">
        </el-table-column>
        <el-table-column
                prop="status"
                label="状态">
            <template slot-scope="scope">
                <span v-if="scope.row.status == 0" @click="toPay" style="color: #dd6161">未支付</span>
                <span v-if="scope.row.status == 1"    style="color: #5daf34">已支付</span>
            </template>
        </el-table-column>
        <el-table-column
                prop="orders"
                label="处理状态">
            <template slot-scope="scope">
                <el-tag
                        :type="scope.row.orders == 0 ? 'danger' : 'success'"
                        disable-transitions>{{scope.row.orders == 0 ? "未处理" : "已处理"}}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <!--                <el-button
                                        size="mini"
                                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">取消预约</el-button>
            </template>
        </el-table-column>

    </el-table>

        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">

            <div>支付的金额:￥{{registration.money}}元</div>
            <div>订单的状态:{{paystatus}}</div>
            <!--存放二维码的区域-->
            <qriously v-if="codeUrl!=''" :value="codeUrl" :size="338"/>
        </el-dialog>


</div>
<script>



    var app = new Vue({
            el:"#app",
            //存放所有js对象的  plain  javascript object
            data(){
                return{
                    tableData:[], //表格数据
                    dialogVisible:false,
                    paystatus:'',
                    timer1:'',
                    searchForm:{card:'',sname:''},//搜索对象
                    form: { //form表单对象

                    },
                    tableDataList:[],
                    registration:{
                        money:0.01,
                        id:'',
                        describe: '111',
                    },
                    id:''

                }
            },
            //所有页面元素触发的事件的方法
            methods:{

                loadData() {

                    var _this= this;
                    axios.get('/regi/queryByIn?' + 'sname=' + this.searchForm.sname + '&' +
                        'card=' + this.searchForm.card).then(res => {

                        console.log(res)
                        _this.tableData= res.data.data;
                        _this.tableDataList = res.data.data;
                        alert(JSON.stringify(_this.tableDataList))
                        alert(JSON.stringify(_this.tableDataList[0].id))
                        _this.registration.id=_this.tableDataList[0].id
                        _this.registration.card=_this.tableDataList[0].card

                        alert(JSON.stringify(res))
                    })


                },

                search(){
                    //直接调用loadData
                    this.loadData();
                },



                queryPayStatus(ordernum) {
                    var _this = this;
                    //axios.get("/order/getPayStatus?orderNum=" + ordernum)
                    //  url = /order/getPayStatus/order123
                    axios.get("/order/getPayStatus/" + ordernum)
                        .then(function (response) {
                            //注意  trade_state_desc不能随便写，这是微信平台返回给我们的
                            _this.paystatus = response.data.data.trade_state_desc;
                            if (_this.paystatus == "支付成功") {
                                _this.$message({
                                    message: '预约成功',
                                    type: 'success'
                                });
                                alert(_this.id)
                                //支付成功修改订单状态为成功
                                axios.put("/regi/updateId?id="+_this.tableDataList[0].id)
                                    .then(response => {
                                        console.log(response);

                                        if (response.data.code === 200) {
                                            alert(JSON.stringify(response))
                                        }

                                    });
                                _this.dialogVisible = false;
                                //清除定时任务  不让每3秒再执行
                                clearInterval(_this.timer1);
                              //  location.href="/html/registration-page.html"
                            }
                        })
                },
                //处理关闭支付弹框
                handleClose(done) {
                    this.$confirm('确认关闭？')
                        .then(_ => {
                            done();
                        })
                        .catch(_ => {});
                },



                //处理删除
                handleDelete(index, row) {
                    this.$confirm('此操作将取消预约，是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.delete('/regi/delete', {params: {id: row.id}}).then(response => {
                            if (response.data.code == 200) {
                                this.loadData();
                                this.$message.success('取消成功了')
                            } else {
                                this.$message.success('取消失败了')
                            }
                        }).catch(function (error) {
                            console.log(error);
                            this.$message.success('取消失败了')
                        });
                    })},
                toPay(){
                    alert(111);
                    var _this= this;

                    alert(JSON.stringify(_this.registration))
                   // _this.dialogFormVisible = false

                    _this.registration.careerId=_this.tableDataList[0].id+_this.tableDataList[0].card+'00000';
                    alert(_this.registration.careerId)
                   // _this.registration.id=res.data.data.id
                    alert(_this.registration.id)
                    //
                    //_this.registration.describe=res.data.data.sname+'支付预约费用';
                    alert(JSON.stringify(_this.registration))
                    axios.post('/regi/getNativeCodeUrl', this.registration).then(res => {
                        alert("222222222222222")
                        _this.dialogVisible=true
                        alert(JSON.stringify(res))
                        _this.codeUrl=res.data.data.code_url;
                        _this.queryPayStatus();
                    })

                }

            /*  beforeCreate(){
                 alert("创建前----");
              },*/

            },
            created(){//初始化操作
                //alert("创建后----");
               // this.loadData()
                // this.tableData=false;
                this.timer1=setInterval(()=>{
                    this.queryPayStatus(this.registration.careerId);
                },3000)
            },
    }
    )
    // 获取元素
    var element = document.querySelector('.el-table__empty-text');

    // 替换文字
    element.textContent = '请输入你的信息';
</script>
</body>
<style>
    .el-table__empty-text{
       font-size: 18px;
        font-family: 宋体;

    }
</style>
</html>
